<template>
  <div class="profile">
    <nav-bar class="home-nav"><div slot="center">我的信息</div> </nav-bar>
    <div class="sign">
      <img
        class="img1"
        src="https://portrait.gitee.com/uploads/avatars/user/2941/8823985_fu-shangbo_1618313010.png!avatar200"
      />
      <div class="text">
        <p class="p1">登录/注册</p>
        <p class="p2">
          <img src="~assets/img/profile/phone.svg" alt="" />
          暂无绑定手机号
        </p>
      </div>
      <img src="~assets/img/common/back.svg" class="back" />
    </div>

    <div class="yver">
      <div class="yver-left">
        <span class="span1">0.00元</span>
        <span class="span2">我的余额</span>
      </div>
      <div class="yver-left">
        <span class="span1">0个</span>
        <span class="span2">我的优惠</span>
      </div>
      <div class="yver-left">
        <span class="span1">0分</span>
        <span class="span2">我的积分</span>
      </div>
    </div>

    <div class="jiange"></div>

    <ul>
      <li>
        <img src="~assets/img/profile/message.svg" alt="" />
        我的消息
      </li>
      <li>
        <img src="~assets/img/profile/pointer.svg" alt="" />

        积分商城
      </li>
      <li>
        <img src="~assets/img/profile/vip.svg" alt="" />
        会员卡
      </li>
      <div class="jiange"></div>
      <li><img src="~assets/img/profile/cart.svg" alt="" />积分商城</li>
      <li>
        <img src="~assets/img/profile/shopping.svg" alt="" />
        积分商城
      </li>
    </ul>

    <!-- <img src="~assets/img/profile/message.svg" alt=""> -->
  </div>
</template>

<script>
import NavBar from "components/common/navbar/NavBar";
export default {
  name: "Profile",
  components: {
    NavBar,
  },
};
</script>

<style scoped>
.profile {
  background-color: #eee;
}
.home-nav {
  background-color: var(--color-tint);
  color: #fff;
}
.sign {
  position: relative;
  height: 70px;
  background-color: var(--color-tint);
  display: flex;
}
.img1 {
  margin: 10px 10px;
  margin-top: 0px;
  width: 60px;
  height: 60px;
  border-radius: 30px;
}
.text {
  color: #fff;
  margin: 20px 10px;
  margin-left: 0px;
}
.p1 {
  font-size: 16px;
}
.p2 {
  font-size: 14px;
}
.text img {
  vertical-align: middle;
  width: 15px;
  margin-right: -3px;
}
.back {
  position: absolute;
  transform: rotateY(180deg);
  width: 15px;
  right: 10px;
  bottom: 35px;
}
.yver {
  padding: 15px 0px;
  display: flex;
  background-color: #fff;
}
.yver-left {
  flex: 1;
  display: flex;
  flex-direction: column;
  text-align: center;
}
.span1 {
  font-size: 20px;
  color: red;
}
.span2 {
  font-size: 12px;
  color: black;
}
.jiange {
  height: 15px;
  background: #eee;
}
ul li {
  position: relative;
  background-color: #fff;
  border: solid #eee 1px;
  height: 35px;
  line-height: 35px;
  padding-left:40px;
}
ul li img {
  position: absolute;
  width: 23px;
  top: 5px;
  left: 8px;
}
</style>